<template>
  <d2-container>
    <div style="margin: 12px">
      <div style="background-image: url(/image/model/vis-banner941e2.jpg);margin-left: 8px; ">
        <div>
          <h2 style="color: white;padding-top: 30px;margin-left: 20px">一站式视觉AI模型训练服务平台</h2>
          <p style="color: white;font-size: 14px;padding-bottom: 20px; margin-top: 20px;margin-left: 20px">
            零算法基础定制高精度图像应用AI模型
          </p>
        </div>
      </div>

      <div>
        <el-row>
          <el-col :span="8">
            <el-card style="margin-left: 8px;margin-top: 10px">
              <img src="/image/model/img-cls38ce7b.png">
              <h3 style="margin-top:10px">图像分类</h3>
              <div style="margin-top:10px; text-align: left; font-size: 12px;line-height: 2">
                定制识别一张图中是否是某类物体/状态/场景，适合图片中主体或者状态单一的场景
              </div>
              <div style="margin-top:10px">
                <el-tag size="small">图片内容检索</el-tag>
                <el-tag size="small" style="margin-left: 5px">制造业分拣或质检</el-tag>
              </div>
              <div style="margin-top:10px">
                <el-button type="text" class="button" @click="$router.push({path:'/project/create',query:{ type:0 }})">创建项目</el-button>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card style="margin-left: 8px;margin-top: 10px">
              <img src="/image/model/detectionbfafd5.png">
              <h3 style="margin-top:10px">目标检测</h3>
              <div style="margin-top:10px; text-align: left; font-size: 12px;line-height: 2">
                定制识别图中每个物体的位置、名称，适合有多个主体、或要识别位置及数量的场景
              </div>
              <div style="margin-top:10px">
                <el-tag size="small">视频监控</el-tag>
                <el-tag size="small" style="margin-left: 5px">工业检测</el-tag>
                <el-tag size="small" style="margin-left: 5px">医疗诊断</el-tag>
              </div>
              <div style="margin-top:10px">
                <el-button type="text" class="button" @click="$router.push({path:'/project/create',query:{ type:1 }})">创建项目</el-button>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card style="margin-left: 8px;margin-top: 10px">
              <img src="/image/model/segment66e44e.jpg">
              <h3 style="margin-top:10px">图像分割</h3>
              <div style="margin-top:10px; text-align: left; font-size: 12px;line-height: 2">对比目标检测，支持用多边形标注训练数据，模型可识别目标位置及轮廓（像素级）</div>
              <div style="margin-top:10px">
                <el-tag size="small">卫星图像分析</el-tag>
                <el-tag size="small" style="margin-left: 5px">医学图像分析</el-tag>
              </div>
              <div style="margin-top:10px">
                <el-button type="text" class="button" @click="$router.push({path:'/project/create',query:{ type:2 }})">创建项目</el-button>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <div>
        <el-card style="margin-left: 8px;margin-top: 10px;">
          <h3 style="text-align: center">简单四步体验全流程，轻松获得AI模型</h3>
        <el-row>
          <el-col :span="6">
            <el-card style="margin-top: 20px;height: 150px">
              <h3 style="margin-top:10px">01 创建项目</h3>
              <div style="margin-top:10px; text-align: left; font-size: 12px;line-height: 2">
                了解不同类型模型的功能，选择想要训练的模型，创建相应项目
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card style="margin-left: 10px;margin-top: 20px;height: 150px">
              <h3 style="margin-top:10px">02 准备数据</h3>
              <div style="margin-top:10px; text-align: left; font-size: 12px;line-height: 2">
                上传并标注需要模型识别的示例数据
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card style="margin-left: 10px;margin-top: 20px;height: 150px">
              <h3 style="margin-top:10px">03 训练模型</h3>
              <div style="margin-top:10px; text-align: left; font-size: 12px;line-height: 2">
                一键启动模型训练
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card style="margin-left: 10px;margin-top: 20px;height: 150px">
              <h3 style="margin-top:10px">04 测试模型</h3>
              <div style="margin-top:10px; text-align: left; font-size: 12px;line-height: 2">
                一键启动模型测试
              </div>
            </el-card>
          </el-col>
        </el-row>
        </el-card>
      </div>
    </div>
  </d2-container>
</template>

<script>
import './api.js'

export default {
  name: 'index',
  data () {
    return {
    }
  },
  methods: {
  }
}
</script>

<style scoped>
.button {
  padding: 0;
}
</style>
